<nz-spin [nzSpinning]="isSpinning">
    <page-header [title]="l('ManageStockCategory')"></page-header>
    <nz-card [nzBordered]="false">
        <div class="mb-md">
            <div nz-row nzGutter="8">
                <!-- 模糊搜索框 -->
                <div nz-col nzSpan="8" nzMd="12" nzXs="24" nzSm="24">
                    <input type="text" nz-input [(ngModel)]="filterText" (keyup.enter)="refresh()" [placeholder]="l('SearchWithThreeDot')" />
                </div>
                <!-- 查询和刷新按钮 -->
                <div nz-col nzSpan="8" nzMd="12" nzXs="24" nzSm="24">
                    <button nz-button nzType="primary" type="submit" (click)="refresh()">
                    <span>{{ l('Search') }}</span>
                </button>
                    <button nz-button nzType="default" type="submit" (click)="refreshGoFirstPage()">
                    {{ l('Reset') }}
                </button>
                </div>
            </div>
        </div>
        <div class="mb-md">
            <!-- 增强型功能按钮位置 如： 添加、批量删除、导出Excel表 -->
            <div nz-row nzGutter="8">
                <div nz-col nzSpan="8" nzMd="12" nzXs="24" nzSm="24" class="btn-gutter">

                    <button nz-button [nzType]="'primary'" *ngIf="isGranted('Pages.StockCategory.Create')" (click)="createOrEdit()">
                    <i class="iconfont icon-plus"></i>
                    <span>
                        {{l("Create")}}
                    </span>
                </button>
                    <ng-container *ngIf="selectedDataItems.length > 0">
                        <button nz-button [nzType]="'danger'" *ngIf="isGranted('Pages.StockCategory.BatchDelete')" (click)="batchDelete()">
                        <i class="iconfont icon-delete"></i>
                        <span>
                            {{l("BatchDelete")}}
                        </span>
                    </button>
                    </ng-container>
                </div>
            </div>
        </div>
        <!-- 多选框 判断选择了多少行数据，以及一个刷新按钮 -->
        <div class="my-md">
            <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
                <ng-template #message>
                    <span [innerHTML]="l('GridSelectedXItemsTips',selectedDataItems.length)"></span>
                    <a (click)="restCheckStatus(dataList)" class="ml-md">
                    {{l('ClearEmpty')}}
                </a>
                    <nz-divider nzType="vertical"></nz-divider>
                    <a (click)="refreshGoFirstPage()">
                    {{l('Refresh')}}
                </a>
                </ng-template>
            </nz-alert>
        </div>
        <!-- 实体的表格内容 -->
        <div nz-row nzGutter="8" class="my-md">
            <nz-table #ajaxTable nzSize="default" [nzData]="dataList" [nzTotal]="totalItems" [(nzPageIndex)]="pageNumber" [(nzPageSize)]="pageSize" (nzPageIndexChange)="pageNumberChange()" [nzPageSizeOptions]="PageSizeOptions" (nzPageSizeChange)="refresh()" [nzShowSizeChanger]="true"
                [nzShowQuickJumper]="true" [nzNoResult]="noDataTemplate" [nzShowTotal]="showTotalTemplate" [nzFrontPagination]="false" [nzScroll]="{ x: '1300px', y: '520px' }">
                <!-- [nzLoading]="isTableLoading" 要开启表格的loading状态，移动代码到上方 -->
                <!-- 暂无数据组件 -->
                <ng-template #noDataTemplate>
                    <no-data></no-data>
                </ng-template>
                <!-- 分页信息显示 当前 1 页/共 3 页，共 5 条/显示 1-2 条 -->
                <ng-template #showTotalTemplate let-total let-range="range">
                    {{l('GridFooterDisplayText',pageNumber,totalPages,total,range[0],range[1])}}
                </ng-template>
                <!-- 表头 -->
                <thead (nzSortChange)="gridSort($event)">
                    <tr>
                        <th nzBreakWord="true" nzAlign="center" nzWidth="50px" nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckboxDisabled" [nzIndeterminate]="checkboxIndeterminate" (nzCheckedChange)="checkAll($event)"></th>
                        <th nzShowSort nzSortKey="Name" nzWidth="140px" nzAlign="left">
                            <span>{{l('StockCategoryName')}}</span>

                        </th>
                        <th nzShowSort nzSortKey="Sort" nzWidth="100px" nzAlign="left">
                            <span>{{l('Sort')}}</span>

                        </th>
                        <th nzShowSort nzSortKey="Status" nzWidth="100px" nzAlign="left">
                            <span>{{l('Status')}}</span>

                        </th>
                        <th nzShowSort nzSortKey="CollegeId" nzWidth="140px" nzAlign="left">
                            <span>{{l('CollegeName')}}</span>

                        </th>
                        <th nzShowSort nzSortKey="Description" nzWidth="180px" nzAlign="left">
                            <span>{{l('StockCategoryDescription')}}</span>

                        </th>
                        <th nzWidth="230px" nzAlign="center">
                            <span>{{l('Actions')}}</span>
                        </th>
                    </tr>
                </thead>
                <!-- 表格内容 -->
                <tbody>
                    <tr *ngFor="let item of ajaxTable.data">
                        <!-- Checkbox多选框 -->
                        <td nzAlign="center" nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshCheckStatus(dataList)"></td>
                        <td nzAlign="left">
                            <ellipsis lines="2" tooltip>
                                <span>
                                {{item.name}}
                            </span>
                            </ellipsis>
                        </td>
                        <td nzAlign="left">
                            <ellipsis lines="2" tooltip>
                                <span>
                                {{item.sort}}
                            </span>
                            </ellipsis>
                        </td>
                        <td nzAlign="left">
                            <ellipsis lines="2" tooltip>
                                <span>
                                {{item.statusName}}
                            </span>
                            </ellipsis>
                        </td>
                        <td nzAlign="left">
                            <ellipsis lines="2" tooltip>
                                <span>
                                {{item.collegeName}}
                            </span>
                            </ellipsis>
                        </td>
                        <td nzAlign="left">
                            <ellipsis lines="2" tooltip>
                                <span>
                                {{item.description}}
                            </span>
                            </ellipsis>
                        </td>

                        <td>
                            <!-- 试卷链接  -->
                            <ng-container *ngIf="isGranted('Pages.StockCategory.Edit')">
                                <a (click)="share(item.id)">
                                    <i class="iconfont icon-edit mr-sm"></i>
                                    <span>{{l('ShareLink')}}</span>
                                </a>
                                <nz-divider nzType="vertical"></nz-divider>
                            </ng-container>
                            <!-- 编辑 -->
                            <ng-container *ngIf="isGranted('Pages.StockCategory.Edit')">
                                <a (click)="createOrEdit(item.id)">
                                    <i class="iconfont icon-edit mr-sm"></i>
                                    <span>{{l('Edit')}}</span>
                                </a>
                                <nz-divider nzType="vertical"></nz-divider>
                            </ng-container>
                            <!-- 删除  -->
                            <ng-container *ngIf="isGranted('Pages.StockCategory.Delete')">
                                <nz-popconfirm [nzTitle]="l('ConfirmDeleteWarningMessage')" (nzOnConfirm)="delete(item)" [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')">
                                    <a nz-popconfirm>
                                        <i class="anticon anticon-delete mr-sm"></i>
                                        <span>{{l('Delete')}}</span>
                                    </a>
                                </nz-popconfirm>
                                <nz-divider nzType="vertical"></nz-divider>
                            </ng-container>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </nz-card>
</nz-spin>